// React组件相关类型定义

import { Color, ColorScheme, ColorSchemeType, RecommendationType } from './index';

// ColorPicker组件Props
export interface ColorPickerProps {
  value: string;
  onChange: (color: string) => void;
  mode: 'hsl' | 'rgb' | 'hex' | 'hsv';
  showPresets?: boolean;
  disabled?: boolean;
  className?: string;
}

// ColorPalette组件Props
export interface ColorPaletteProps {
  colors: Color[];
  maxColors?: number;
  allowEdit?: boolean;
  onColorChange: (index: number, color: Color) => void;
  onColorAdd: (color: Color) => void;
  onColorRemove: (index: number) => void;
  className?: string;
}

// RecommendationPanel组件Props
export interface RecommendationPanelProps {
  baseColor: Color;
  recommendationType: RecommendationType;
  schemeType: ColorSchemeType;
  onRecommendationSelect: (colors: Color[]) => void;
  loading?: boolean;
}

// ColorCard组件Props
export interface ColorCardProps {
  color: Color;
  size?: 'sm' | 'md' | 'lg';
  showInfo?: boolean;
  onClick?: (color: Color) => void;
  onCopy?: (color: Color) => void;
  className?: string;
}

// Modal组件Props
export interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  children: React.ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl';
}

// Button组件Props
export interface ButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
  disabled?: boolean;
  loading?: boolean;
  onClick?: () => void;
  className?: string;
  type?: 'button' | 'submit' | 'reset';
}

// Input组件Props
export interface InputProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  type?: 'text' | 'email' | 'password' | 'number';
  disabled?: boolean;
  error?: string;
  label?: string;
  className?: string;
}

// Toast通知类型
export interface ToastNotification {
  id: string;
  type: 'success' | 'error' | 'warning' | 'info';
  title: string;
  message?: string;
  duration?: number;
  createdAt: Date;
}

// 主题配置
export interface ThemeConfig {
  colors: {
    primary: string;
    secondary: string;
    success: string;
    warning: string;
    error: string;
    background: string;
    surface: string;
    text: string;
  };
  spacing: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
  };
  borderRadius: {
    sm: string;
    md: string;
    lg: string;
  };
}

// 路由守卫类型
export interface RouteGuard {
  requiresAuth: boolean;
  roles?: string[];
  redirectTo?: string;
}